<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>搜索产品</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
	<meta content="yes" name="apple-mobile-web-app-capable"/>
	<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
	<meta content="telephone=no" name="format-detection"/>
    <?php 
    	include 'public/views/header.php';
    	include 'public/home/html/mobile_select.php';
    	include 'public/home/html/lazy_load.php';
    	include 'public/home/html/alert.php';
    ?>
	<script src="public/home/js/searchProduct.js"></script>
	<script src="public/home/js/function.js"></script>
</head>
<style type="text/css">
	*{
		font-size: 14px;
	}
	a{
		color:#999!important;
		text-decoration: none;
	}
	body{
		background-color: white;
		max-width:400px;
		margin:auto;
	}

	/*顶部，标题*/
	.head{
		width: 100%;
		height: 60px;
		background: #f2f2f2;
	}
	.head .col-xs-3,.head .col-xs-6{
		height:60px;
	}
	.head .col-xs-6{
		text-align: center;
	}
	.head .col-xs-3 img{
		height: 26px;
		width: 30px;
		margin-top: 17px;
	}
	.head .col-xs-6 img{
		height: 50px;
		width: auto;
		 margin-top: 5px;
	}
	.title{
		width:88%;
		margin-left:6%;
		margin-top: 20px;
	}
	.title-font{
		color: #a53942;
		font-weight:bold;
		font-size:16px;
	}
	.title-line{
		height: 3px;width:18px;background: #a53942;
	}
	
	/*搜索*/
	.search{
	    height:50px;
	    width:88%;
	    margin-left: 6%;
	    margin-top:25px;

	}
	.search-input i{
	    font-size: 18px;
	    color:#606060;
	}
	.search-input i:nth-child(2){
	    float: right!important;
	}
	.search-input{
	    border:1px solid #f1f1f2;
	    border-radius: 4px;
	    height:36px;
	    margin-top:7px;
	    /*background-color: red;*/
	}
	.search-input input{
	    height:34px;
	    width:80%;
	    outline: none;
	    background-color: white;
	    border:none;
	}
	.search-button button{
	    background-color: #BD7E75;
	    color:white;
	    font-size: 13px;
	    border:none;
	    outline: none;
	    height:34px;
	    width:60px;
	    border-radius: 5px;
	    margin:8px auto;
	}

	/*搜索*/
	.search-border{
		height: 35px;
		width: 40%;
		border: 1px solid #dcdcdc;
		border-radius: 5px;
		margin:20px 6%;
		margin-right:0px;
		line-height:35px;
		padding:0px 10px;
		display: inline-block;
	}
	.search-border .search-val{
		width: 80%;
		padding-left:10%;
		color:#959191;
		overflow: hidden;
		height:35px;
	}
	.search-border-item{
		float: left;
	}
	.search-border-item i{
		color:#959191;
	}

	.search-result{
		width:88%;
		height:30px;
		line-height: 30px;
		margin-left:6%;
		color:#959191;
		font-size:13px;
		display: none;
		word-wrap : break-word ;
	}



	/*搜索结果*/
	.product{
		width:87%;
		margin-left: 6.5%;
		padding-bottom:25px;
	}
	.product-etype{
		height:40px;
		line-height: 37px;
		color:#4A84C6;
		position: relative;
		font-weight:bold;
		font-size: 19px;
	}
	.product-title-line{
		background-color:#4A84C6;
		width: 20px;
		height:2px; 
		position: absolute;
		top:30px;
	}
	.product-ctype{
		height:30px;
		line-height: 27px;
		color:#090A0A;
		position: relative;
		font-weight:bold;
		font-size: 20px;
	}
	.product-item{
		width:45%;
		margin-top:25px;
		/*display: inline-block;*/
		height:154px;
		border-radius: 2px;
		-moz-box-shadow:0px 0px 6px #aaa;
		-webkit-box-shadow:0px 0px 6px #aaa; 
		box-shadow:0px 0px 6px #aaa;
		overflow: hidden;
		position: relative;
		float: left;
	}
	.product-item:nth-child(odd){
		margin-right: 4%;
		margin-left: 1%;
	}
	.product-item:nth-child(even){
		margin-left: 4%;
	}
	.product-img{
		height:90px;
		width:100%;
		overflow: hidden;
		text-align: center;
	}
	.product-img img{
		width:auto;
		height:100%;
		margin:auto;
	}
	.product-num{
		width:40%;
		height:30px;
		line-height:30px;
		text-align: left;
		text-indent: 10px;
		font-size:12px;
		font-weight:bold;
		float: left;
		overflow: hidden;
	}
	.product-collection{
		width:60%;
		height:30px;
		line-height:30px;
		text-align: right;
		font-size:7px;
		font-weight:bold;
		float: right;
		overflow: hidden;
	}
	.product-collection lable{
		font-size:7px;
	}
	.product-collection img{
		height:12px;
		width:15px;
		/*margin-bottom:-20px;*/
		position: relative;
		top:8px;
		margin-left: 7px;
		margin-right:10px;
	}
	.product-collection i{
		font-size:9px;
		margin-left:3px;
		margin-right:10px;
	}

	.product-line-1,.product-line-2,.product-line-3,.product-line-1 lable,.product-line-2 lable,.product-line-3 lable{
		width:100%;
		height:9px;
		line-height: 9px;
		font-size:7px;
		/*background-color: red;*/
		text-indent: 10px;
	}
	.product-line-2{
		color:#dd2727;
	}
	.product-item-mask{
		background:rgba(0,0,0,0.4);
		height:170px;
		width:100%;
		position: absolute;
		top:0px;
		line-height:170px;
		text-align: center;
	}
	.product-item-mask i{
		font-size: 30px;
		color:white;
		margin-top: 63px;
	}

	.product-item-more{
		display: none;
	}


	/*加载中*/
	.load{
	    font-size: 45px;
	    margin-top: 30px;
	    margin-bottom: 30px;
	    margin-left: 45%;
	}
</style>
<body>
	<!-- demo -->
	<!-- 产品demo -->
	<div class="product-demo hide">
		<div class="product-item">
			<a href="">
			<div class="product-img">
				<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2311240988,1038461165&fm=26&gp=0.jpg" data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2311240988,1038461165&fm=26&gp=0.jpg" alt="" />
			</div>
			</a>
			<div class="product-num">815341</div>
			<div class="product-collection">已有<lable>64</lable>人收藏<i class="fa fa-heart" aria-hidden="true"></i></div>
			<div style="clear: both;"></div>	
			<div class="product-line-1">碗盆</div>
			<div class="product-line-2">The New Classic系列</div>
			<div class="product-line-3">尺寸 <lable>550×380×145</lable> mm</div>
		</div>	
	</div>	
	
	<!-- 正式开始 -->
	<input type="hidden" id="park_id" value="<?php echo $park_id ?>"/>
	<input type="hidden" id="openid" value="<?php echo $openid ?>"/>
	<div class="head">
		<div class="col-xs-3"><img src="<?php echo base_url().'/public/home/images/pic/'?>detail.png" alt="" class="show-index"></div>
		<div class="col-xs-6"><img src="<?php echo $_SESSION[SESS_CONFIG][DicKey::Logo[XPHEnum::Value]]['dic_value'] ?>" alt=""></div>
		<div class="col-xs-3"></div>
	</div>
	

	<!-- 搜索产品型号 -->
    <div class="search">
        <div class="col-xs-9 search-input"><i class="icon-search"></i><input type="text" class="code" placeholder="搜索产品型号" /><i class="icon-remove icon-remove-code"></i></div>
        <div class="col-xs-3 search-button"><button>搜索</button></div>
    </div>


	<div>
		<div class="search-border">
			<div class="search-border-item"><i class="icon-search"></i></div>
			<div class="search-border-item search-val" id="series">产品系列</div>
			<div class="search-border-item"><i class="icon-remove" id="icon-remove-series"></i></div>
		</div>
		<div class="search-border">
			<div class="search-border-item"><i class="icon-search"></i></div>
			<div class="search-border-item search-val" id="type">品类名称</div>
			<div class="search-border-item "><i class="icon-remove" id="icon-remove-type"></i></div>
		</div>		
	</div>
	<!-- <div class="search-result">共<lable></lable>个产品&nbsp&nbsp筛选条件：<lable></lable></div> -->
	<div class="search-result">共<lable></lable>个产品</div>
	
	
	
	<!-- 产品（搜索结果） -->
	<div class="product"></div>
	<!-- loading -->
	<i class="icon-spinner icon-spin load"></i>

	<div style="clear: both;"></div>

	
	<div class="select_box select-box1"></div>
	<div class="select_box select-box2"></div>
</div>


	<!-- index iframe -->
	<div class="zhezhao" style="position:fixed; z-index:999; background: rgba(0,0,0,0.5); display: none; top:0px; left:0px;"></div>
	<iframe class="index-iframe" src="<?php echo base_url() ?>Home/Index/Index?park_id=<?php echo $_GET['park_id'] ?>" frameborder="0" style="position: fixed; z-index:1000; top:0px;"></iframe>
</body>
<script>
	$(function(){
		$('.index-iframe').css('left','-'+(Number($(window).width())*0.8)+'px').width(Number($(window).width())*0.8);
		setWindow();
		$(window).resize(function(){
			setWindow();
		});
		$('.show-index').click(function(){
			$('.zhezhao').show();
			$('.index-iframe').animate({left:'0px'});
		});
	})
	function setWindow(){
		$('.zhezhao').height($(window).height()).width($(window).width());
		$('.index-iframe').height($(window).height());
	}
</script>
</html>
